<template>
  <div class="box">
    <div class="radar_main"></div>
    <div class="line_main"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {onMounted} from "vue";
import labelsets from "@/api/labelsets";

export default {
  name: "LabelSets",
  setup() {
    // 加载函数
    onMounted(() => {
      console.log(123)
      getList();
    });

    // 查
    function getList() {
      let userData = JSON.parse(localStorage.getItem('userData'))

      console.log(userData.userId)
      let da = {}
      da.userId = userData.userId
      labelsets.list(da).then(res => {
        labelsets.analysis({"labelsetId": res.data[3].labelsetId}).then(res => {
          let analysisData = JSON.parse(res.data.data)
          console.log(analysisData)
          let voxel = []
          voxel.push(analysisData.voxel_max)
          voxel.push(analysisData.voxel_mean)
          voxel.push(analysisData.voxel_median)
          voxel.push(analysisData.voxel_min)
          voxel.push(analysisData.voxel_std)
          voxel.push(analysisData.voxel_total)


          Radar(voxel);
          LineBar(analysisData.voxel_value_distribution, analysisData.voxel_value_distribution_ratio);
        })
      })
    }

    function Radar(voxel) {
      console.log(voxel)
      const chart = echarts.init(document.querySelector(".radar_main"));
      let option = {
        title: {
          text: '体素'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          left: 'center',
          data: [
            'A Software',
          ]
        },
        radar: [
          {
            indicator: [
              {text: 'voxel_max'},
              {text: 'voxel_mean'},
              {text: 'voxel_median'},
              {text: 'voxel_min'},
              {text: 'voxel_std'},
              {text: 'voxel_total'}
            ],
            radius: 100
          },
        ],
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            areaStyle: {},
            data: [
              {
                value: [60, 73, 85, 40, 120, 80],
                name: 'voxel analysis'
              }
            ]
          },
        ]
      };
      option.series[0].data.value = voxel
      chart.setOption(option)
    }

    function LineBar(voxel_value_distribution, voxel_value_distribution_ratio) {
      const chart = echarts.init(document.querySelector(".line_main"));
      let option =  {
        xAxis: {},
        yAxis: {},
        series: [
          {
            symbolSize: 10,
            data: [],
            type: 'scatter'
          }
        ]
      };

      let showData = []
      for (let i = 0; i < voxel_value_distribution.length; i++) {
        console.log(voxel_value_distribution[i])
        for (let j = 0; j < voxel_value_distribution_ratio.length; j++) {
          if (i === j) {
            let da = []
            da.push(voxel_value_distribution[i])
            da.push(voxel_value_distribution_ratio[j])
            showData.push(da)
            break
          }else{
            continue
          }
        }
      }
      console.log(showData)
      option.series[0].data = showData
      chart.setOption(option)
    }

    return {}
  }
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  padding: 0;
  margin-top: 22px;
}

.radar_main, .line_main {
  width: 400px;
  height: 400px;
}
</style>